<script lang="ts">
import { inject, onMounted } from 'vue'
import { Viewer, Cartesian3, WebMapTileServiceImageryProvider } from 'cesium'

export default {
  name: 'CesiumContainer',
  setup () {
    const viewer = inject<Viewer>('Viewer')
    if (!viewer) return
    console.log(process.env)
    onMounted(() => {
      /* eslint no-new: */
      viewer.imageryLayers.removeAll()
      viewer.imageryLayers.addImageryProvider(new WebMapTileServiceImageryProvider({
        url: 'https://t{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f0175927031c1e12cb804b0c3b8cce4d',
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        layer: 'tdtVecLayer',
        style: 'default',
        format: 'image/jpeg',
        tileMatrixSetID: 'GoogleMapsCompatible', // 使用谷歌的瓦片切片方式
        maximumLevel: 18
      }))
      const vecAnnoProvider = new WebMapTileServiceImageryProvider({
        url: 'https://t{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f0175927031c1e12cb804b0c3b8cce4d',
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        layer: 'tdtVecAnnoLayer',
        style: 'default',
        format: 'image/jpeg',
        tileMatrixSetID: 'GoogleMapsCompatible', // 使用谷歌的瓦片切片方式
        maximumLevel: 18
      })
      viewer.imageryLayers.addImageryProvider(vecAnnoProvider)
      viewer.camera.flyTo({
        destination: new Cartesian3(
          -2883901.117952277,
          5633293.749415256,
          3038180.9436673764),
        orientation: {
          heading: 6.283185307179583, // east, default value is 0.0 (north)
          pitch: -1.5704656609358407, // default value (looking down)
          roll: 0
        },
        duration: 3
      })
    })
  }
}
</script>
<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
